<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" />
		<!-- 弹窗 -->
		<uni-popup id="popup" :show="popupShow" @maskClick="true" ref="sheet" type="center">
			<view style="background-color: #fFFFFF;padding: 30rpx;margin: 30rpx;">
				<view class="flex align-center">
					<image src="/static/find/dui.png" mode="aspectFit" style="width:64rpx;height: 64rpx;"></image>
					<view style="font-size: 36rpx;margin-left: 10rpx;">
						我们已为您分配专业设计
					</view>
				</view>
				<view
					style="font-size: 32rpx;color: rgba(30,30,30,0.6);margin: 20rpx 0 20rpx 20rpx;line-height: 60rpx;">
					根据您的需求，我们已为您分配了一对一的专业室内设计师，将由Ta来帮您提供一站式装修服务，快去消息中心和设计师聊聊吧
				</view>
				<view class="flex align-center" style="margin-left: 300rpx;">
					<view style="text-align: center;padding: 30rpx;" @click="Later">
						稍后再去
					</view>
					<view
						style="color: #FFFFFF;width: 162rpx;height: 70rpx;text-align: center;background-color: #492D22;border-radius: 10rpx;line-height: 70rpx;"
						@click="determine(1)">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<mescroll-body ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="{auto: false, bgColor: '#FFFFFF'}" :up="upOption">
			<view style="padding:30rpx;background: #ffffff;">
				<image src="../../static/install/213.png" mode="aspectFit" style="width:690rpx;height: 144rpx;"></image>
				<view class="sisters">
					<view class="flex" style="margin-top: 45rpx;">
						<view style="color: #333333; font-size: 32rpx;font-weight: 500;width:80rpx;">
							地方</view>
						<view style="display: flex;flex-flow: wrap;">
							<view class="cityTable" v-for="(item,index) in cityType" :key="index"
								:class="cityTindex==index ? 'cityStyle' :''" @click="cityChild(index)">
								{{item}}
							</view>
						</view>
					</view>
					<view class="flex" style="margin-top: 45rpx;">
						<view style="color: #333333; font-size: 32rpx;font-weight: 500;width:100rpx;">
							风格</view>
						<view style="display: flex;flex-flow: wrap;">
							<view class="cityTable" v-for="(item,index) in styleType" :key="index"
								:class="styleIndex==index ? 'cityStyle' :''" @click="styleChild(index,item.id)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 52rpx;background: #ffffff;padding:30rpx ;" v-for="(item,index) in designData"
				:key="index" @click="details(item.id)">
				<view>
					<view class="flex align-center">
						<u-avatar :src="item.image" size="50"></u-avatar>
						<view style="margin-left: 30rpx;margin-top: 22rpx;">
							<view style="color: #333333;font-size: 32rpx;">{{item.designerName}}</view>
							<view class="flex align-center" style="margin-top: 20rpx;">
								<image src="../../static/7741.png" mode="aspectFill"
									style="width:142rpx ;height: 40rpx;"></image>
								<view class="titleStyle" style="margin-left: 32rpx;">{{item.name}}</view>
							</view>
						</view>
					</view>
					<view style="color: #333333;font-size: 28rpx;margin-top: 30rpx;">{{item.signature}}</view>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view class="flex">
						<view class="followList flex flex-direction " style="padding:20rpx 0 ;margin-right:30rpx;"
							v-for="(itema,index) in item.article">
							<image :src="itema.image" mode="aspectFill" style="width: 300rpx;height: 180rpx;border-radius: 8rpx;">
							</image>
							<view class="followList-name">{{itema.title}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; //引入滚动
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				popupShow: true,
				upOption: {
					auto: false,
					empty: {
						tip: '~ 无更多数据 ~'
					},
					textNoMore: '--没有更多了--',
					noMoreSize: 3,
				},
				config: {
					title: '找设计',
					color: '#111111',
					backgroundColor: [1, '#FFFFFF'],
					border: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				cityType: ['全国'],
				cityTindex: 0,
				// 设计风格
				styleType: [],
				styleIndex: 0,
				// 列表
				designData: [],
				index: '',
			}
		},
		onLoad(e) {
			this.index = e.index
			this.styleIndex = e.styleTindex
			console.log('设计风格', this.styleIndex)
			this.getStyle()
			this.getDevise(this.styleIndex, 1, 10)
		},
		mounted() {
			// console.log('带嗲鸟',this.index)
			if (this.index == 1) {
				this.$refs['sheet'].open()
			}
		},
		methods: {
			// 确定
			determine(index) {
				console.log('index是多少', index)
				uni.switchTab({
					url: '/pages/information/chatPage'
				})
				uni.$emit('index', {
					index: index
				})
			},
			// 稍后再去
			Later() {
				this.$refs.sheet.close()
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(e) {
				this.getStyle()
				this.getDevise(undefined, e.num, 10)
			},
			// 风格
			getStyle() {
				let data = {
					type: 3
				}
				this.$api.designerStyle(data).then((res) => {
					this.styleType = res.data.result;
					console.log('风格', this.styleType)
				})
			},
			// 列表
			getDevise(id, num, size) {
				if (id == undefined) id = ''
				let data = {
					pageNo: num,
					pageSize: size,
					style: id
				}
				this.$api.devise(data).then((res) => {
					if (num == 1) {
						this.designData = res.data.result.pageResult.list
					} else {
						this.designData = this.projectList.concat(res.data.result.pageResult.list)
					}
					this.mescroll.endBySize(res.data.result.pageResult.list.length, res.data.result.pageResult
						.total);
					console.log(this.designData, '瓦达')
				})
			},
			cityChild(e) {
				this.cityTindex = e
			},
			styleChild(e, id) {
				this.styleIndex = e
				this.id = id
				if (id == 1) id = ''
				this.getDevise(id, 1, 10)
			},
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop
			},
			details(id) {
				this.$tools.goPageNoAuth('./designDetails?id=' + id)
			}
		}
	}
</script>

<style scoped>
	.cityStyle {
		font-size: 28rpx;
		background: #492D22;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		color: #fFFFFF !important;

	}

	.cityTable {
		margin-left: 32rpx;
		color: #333333;
		padding: 14rpx 16rpx;
		text-align: center;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		font-size: 28rpx;
	}

	.titleStyle {
		color: rgba(30, 30, 30, 0.3);
		background: rgba(30, 30, 30, 0.05);
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		padding: 5rpx 20rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		margin: 20rpx 0;
		overflow: hidden;
	}

	.followList {
		box-shadow: 0 1rpx 7rpx 0 rgba(0, 0, 0, 0.1);
	}

	.followList-name {
		color: #333333;
		font-size: 24rpx;
		margin-top: 18rpx;
		width: 250rpx;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
	}
</style>
